<template>
  <PublicPage page-name="订单详情" :borderType="true" :showNav="true">
    <view class="orderDetails">
      <view ref="aaa"></view>
      <!-- 訂單狀態 -->
      <view class="justify-between bgf u-margin-bottom-16">
        <view class="statusBox">
          <view class="h1 fz-28" :class="{'u-padding-top-20': orderDetails.status !== 1}">{{comparedValue(orderStatus, orderDetails.status)}}</view>
          <view v-if="orderDetails.status === 1"
            >请在<text class="themeFontColor">{{orderDetails.timeFormat || '00:00:00'}}</text>内完成支付</view
          >
        </view>
        <view class="u-p-r-30">   
          <image
            style="width: 160rpx; height: auto"
            :src="statusIconSrc"
            mode="widthFix"
          />
        </view>
      </view>
      <view class="flex-col order_section_13 bgf"> 
        <view class="justify-between order_group_10">
          <text class="fz-16 fw5">收货信息</text>
          <!-- orderDetails.updateCourier === 1 &&  -->
          <view class="u-flex" v-if="orderDetails.courierInformationVOList && orderDetails.courierInformationVOList.length">
            <view @click="goLogistics(orderDetails.orderAllId)">查看物流</view>
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16318489489126392315.png"
              class="order_image_9"
            />
          </view>
        </view>

      <!-- 快递信息 -->
      <!-- orderDetails.updateCourier === 1 &&  -->
        <view class="order_group_13 flex-row fz-12 u-p-t-10" v-if="orderDetails.courierInformationVOList && orderDetails.courierInformationVOList.length">
          <view class="linh-20 u-p-t-10">
            <image
                src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/logistics1_icon.png"
                class="order_image_10"
                mode="widthFix"
              />
          </view>
          <!-- 可能存在多個包裹 -->
          <view  style="flex:1;">
            <view class="u-p-t-10 flex-row" v-for="(locaMsg,locaIdx) in orderDetails.courierInformationVOList" :key="locaIdx">
              <view style="flex:1;">
                <view class="order_text_23" style="max-width: 465rpx;"><text>{{locaMsg.logisticsName}}</text><text class="u-p-l-20">{{locaMsg.logisticsCode}}</text></view>
                <view class="order_text_23 ov1 u-p-t-5" style="max-width: 465rpx;" v-if="locaMsg.data">{{locaMsg.data}}</view>
              </view>
              <view style="flex-shrink: 0;">
                <text class="editLocBtn fz-10"@click="_goAddLogit(2,orderDetails.orderAllId,locaMsg.logisticsCode,locaMsg.orderShipId,locaMsg.logisticsName)" v-if="orderDetails.updateCourier === 1" >修改</text>
                <text class="editLocBtn fz-10" @click="_copAddLogit(locaMsg)">复制</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 收货地址 -->
        <view class="order_group_13 fz-12 u-p-t-20 u-p-b-20"> 
          <view class="justify-between items-center">
            <view class="u-flex linh-20">
              <image
                src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/avatar3_icon.png"
                class="order_image_10"
                mode="widthFix"
              />
              <view class="order_text_23">{{orderDetails.receiveName}}</view>
              <view class="order_text_23">{{orderDetails.receiveMobile}}</view>
            </view>
            <view class="u-flex">
              <view class="editLocBtn fz-10" @click="_openEditAddress()" v-if="orderDetails.status === 4 && orderDetails.updateCourier === 1">修改</view>
              <view class="editLocBtn fz-10" @click="_copyUserMsg(orderDetails)">复制</view>
            </view>
          </view>

          <view class="order_text_24 u-p-t-5" v-if="orderDetails.freightType !== 2">{{orderDetails.receiveAddress}}</view>
          
          <view class="u-flex linh-20 u-p-t-5" v-if="orderDetails.remark">
            <image
              src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/wenjian_icon.png"
              class="order_image_10"
              mode="widthFix"
            />
            <view class="order_text_23">备注：</view>
            <view class="order_text_23">{{orderDetails.remark || ''}}</view>
          </view>
        </view>
      </view>
      <!-- 订单信息 -->
      <view class="bgf linh-48 px32 justify-between items-center" style="box-shadow: inset 0px -1px 0px #EEEEEE;">
        <view>订单号：{{orderDetails.orderAllId || ''}}</view>
        <view v-if="orderDetails.isSeller === 0">
          <!-- <text class="order-text_13">[</text> -->
          <!-- <text class="order-text_13" style="max-width:160rpx;margin-left:0;">{{orderDetails.headNickname}}</text> -->
          <!-- <text class="order-text_13" style="margin-left:0;">]的订单</text> -->
        </view>
      </view>
      <!-- 商品信息 -->
      <view class="bgf" style="box-shadow: inset 0px -1px 0px #EEEEEE;">
        <view v-for="(goods, goodsIdx) in orderDetails.orderGoodsDetailsRespVOList" :key="goodsIdx" class="goodsBox">
          <view class="u-flex" @click.stop="navigateTo({url: `/pagesB/goods/goodsDetails?shopWindowId=${goods.shopWindowId}`})">
            <image
              class="goodsImage"
              :src="goods.goodsImages"
              mode=""
            />
            <view class="goodsMsg">
              <view class="name ov1">{{goods.goodsName}}</view>
              <view class="outh">数量：{{goods.count}}<text class="u-padding-left-20">{{goods.skuName}}</text></view>
              <view class="plice themeFontColor">￥{{goods.salePrice}}</view>
            </view>
          </view>
          <view class="justify-end u-margin-top-10">
            <button class="goodsBtn1 huuiduColor" v-if="goods.isHandle === 0 && goods.orderAfterSalesId" @click="_goAfersaleDetails(goods.orderAfterSalesId)">售后详情</button>  
            <button class="goodsBtn1 themeFontColor" v-if="goods.isHandle === 1 && goods.orderAfterSalesId" @click="_goAfersaleDetails(goods.orderAfterSalesId)">处理售后</button>
          </view>
        </view>
      </view>
      <!-- 商品金额 -->
      <view class="bgf u-margin-bottom-20 u-padding-left-32 u-padding-right-32 fz-12">
        <view class="justify-between linh-26 viceColor">
          <view>商品金额</view>
          <view>￥{{orderDetails.payPrice || '0.00'}}</view>
        </view>
        <view class="u-text-right linh-48">
          <text class="u-padding-right-20" v-show="orderDetails.count">共{{orderDetails.count}}件</text>
          <text>实际支付：</text>
          <text class="fz-14 fw5 themeFontColor">￥{{orderDetails.payPrice || '0.00'}}</text>
        </view>
      </view>
      <!-- 拼团信息 -->
      <view class="justify-between order_section_11 u-m-b-20 bgf" v-if="orderDetails.dynamicId">
        <view class="fz-16 fw5">
          团购信息
        </view>
        <view class="u-flex u-col-center u-row-right" style="flex:1;" @click="navigateTo({url: `/pagesB/dynamic/${orderDetails.mediaType && orderDetails.mediaType === 1 ? 'graphicsDetail' : 'videoDetail'}?type=1&dynamicId=${orderDetails.dynamicId}`})">
          <view style="max-width:250rpx;" class="ov1" v-if="orderDetails.title||orderDetails.content">
            {{orderDetails.title||orderDetails.content}}
          </view>
          <u-icon name="arrow-right" color="#969799" />
        </view>
      </view>
      <!-- 佣金信息 -->
      <view class="u-m-b-20 bgf" v-if="(orderDetails.communityLogoLv1 && orderDetails.communityNameLv1) || (orderDetails.communityLogoLv2 && orderDetails.communityNameLv2)">
        <view class="order_section_11 fz-16 fw5">
            <text>佣金信息</text><text class="viceColor">（仅团长可见）</text>
        </view>
        <view class="justify-between u-col-center u-p-24" v-if="orderDetails.communityLogoLv1 && orderDetails.communityNameLv1">
          <view class="u-flex u-col-center">
            <image :src="orderDetails.communityLogoLv1" style="width:64rpx;height:64rpx;border-radius: 64rpx;" mode="aspectFill" />
            <view class="u-p-l-16">{{orderDetails.communityNameLv1}}</view>
          </view>
          <view class="themeFontColor">￥{{orderDetails.commissionLv1}}</view>
        </view>
        <view class="justify-between u-col-center u-p-24" v-if="orderDetails.communityLogoLv2 && orderDetails.communityNameLv2">
          <view class="u-flex u-col-center">
            <image :src="orderDetails.communityLogoLv2" style="width:64rpx;height:64rpx;border-radius: 64rpx;" mode="aspectFill" />
            <view class="u-p-l-16">{{orderDetails.communityNameLv2}}</view>
          </view>
          <view class="themeFontColor">￥{{orderDetails.commissionLv2}}</view>
        </view>
      </view>
      
      <!-- 订单信息 -->
      <view class="bgf u-margin-bottom-20 u-padding-bottom-20 u-padding-left-32 u-padding-right-32">
        <view class="fz-16 fw5 linh-48" style="box-shadow: inset 0px -1px 0px #EBEDF0;">订单信息</view>
        <view class="u-flex linh-28 fz-12 viceColor" v-if="orderDetails.followGroupNum">
          <view style="width:120rpx">跟团号：</view>
          <view>{{orderDetails.followGroupNum}}</view> 
        </view>
        <view class="u-flex linh-28 fz-12 viceColor">
          <view style="width:120rpx">下单人：</view>
          <image :src="orderDetails.avatar" class="orderAvatar" mode="aspectFill" />
          <view>{{orderDetails.nickname}}</view>
          <view class="editLocBtn fz-12 u-m-l-20" @click="connection(orderDetails.accountId)">联系</view>
        </view>
        <view class="u-flex linh-28 fz-12 viceColor">
          <view style="width:120rpx">订单编号：</view>
          <view>{{orderDetails.orderAllId}}</view>
          <view class="editLocBtn fz-12 u-m-l-20" @click="_copyOrderNo(orderDetails.orderAllId)">复制</view>
        </view>
        <view class="u-flex linh-28 fz-12 viceColor" v-if="orderDetails.payTime">
          <view style="width:120rpx">支付时间：</view>
          <view>{{orderDetails.payTime}}</view>
        </view>
        <view class="u-flex linh-28 fz-12 viceColor" v-if="orderDetails.type === 2">
          <view style="width:120rpx">订单类型：</view>
          <view>购样订单</view>
        </view>
      </view>

      <!-- 底部固定按钮 -->
      <view class="safe-bottom justify-end bgf u-padding-top-20 u-padding-right-32 posFixed">
        <button class="btmBtn1 huuiduColor u-margin-bottom-20" @click="copyShow = true">复制订单</button>
        <button class="btmBtn1 huuiduColor u-margin-bottom-20" v-if="orderDetails.groupAccountId" @click="connection(orderDetails.groupAccountId)">联系供货</button>
        <button class="btmBtn1 huuiduColor u-margin-bottom-20" v-if="orderDetails.helpSellAccountId" @click="connection(orderDetails.helpSellAccountId)">联系帮卖 </button> 
        <!-- 无需物流发货 -->
        <button class="btmBtn1 themeBgColor u-margin-bottom-20" v-if="orderDetails.freightType === 2 && orderDetails.status === 4 && orderDetails.updateCourier === 1" @click="_ship()">发货 </button> 
        <!-- 正常物流发货 -->
        <button class="btmBtn1 themeBgColor u-margin-bottom-20" v-if="orderDetails.freightType !== 2 && orderDetails.status === 4 && orderDetails.updateCourier === 1" @click="_goAddLogit(1,orderDetails.orderAllId,'','')">发货 </button> 
      </view>
    </view>
    <!-- 复制订单信息 -->
    <CopyOrderMsg :show="copyShow" :copyObj="orderDetails" @close="copyShow = false" />

    <!-- 修改收货地址 -->
    <EditAddress :show="editAddressShow" :editObj="orderDetails" @editAddress="upDateAddress" @close="editAddressShow = false" />
    <!-- 确认发货弹窗 -->
    <Modal 
    :show="shipShow" 
    title="确认发货完成" 
    content="本订单为虚拟商品，发货完成操作后订单将完结，确认发货完成？" 
    @close="shipShow = false" 
    @config="_configShip" />
  </PublicPage>
</template>
<script>
import PublicPage from "@/components/publicPage/index.vue";
import Modal from '@/components/modal/index.vue'
import orderApi from "@/api/orderApi.js";
import { comparedValue, orderStatus } from "@/utils/statusList"
import mixin from "@/pages/order/components/myBuyOrder.js";
import CopyOrderMsg from "@/pages/order/components/copyOrderMsg"
import EditAddress from "@/pages/order/components/editAddress"

export default {
  mixins: [mixin],
  components: {
    PublicPage,
    Modal,
    CopyOrderMsg,
    EditAddress
  },
  data() {
    return {
      routeData: {},
      orderDetails: {},
      copyShow: false, // 复制弹窗
      editAddressShow: false,
      shipShow: false
    };
  },
  computed: {
    orderStatus(){
      return orderStatus
    },
    statusIconSrc(){
      if(this.orderDetails.status === 1){
        return 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/order_1.png'
      }else if(this.orderDetails.status === 2){
        return 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/order_3.png'
      }else if(this.orderDetails.status === 3){
        return 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/order_2.png'
      }else if(this.orderDetails.status === 4){
        return 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/order_5.png'
      }else if(this.orderDetails.status === 5){
        return 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/order_4.png'
      }else if(this.orderDetails.status === 6 || this.orderDetails.status === 6){
        return 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/order_7.png'
      }
    }
  },
  onLoad(r) {
    this.routeData = r;
  },
  onShow(){
    this._getOrderDetails()
  },
  methods: {
    comparedValue,
    // 获取订单详情
    _getOrderDetails(){
      orderApi.sellerBuyOrderListDetails(this.routeData).then(res=>{
        this.orderDetails = res.data
      })
    },
    // 查看物流
    goLogistics(orderAllId){
      this.navigateTo({ url: `/pagesA/order/logisticsMode?orderAllId=${orderAllId}` })
    },
    // 跳转去售后详情
    _goAfersaleDetails(orderAfterSalesId){
      this.navigateTo({url: `/pagesA/order/sellerAftersaleDetails?orderAfterSalesId=${orderAfterSalesId}`});
    },
    // 复制单号
    _copyOrderNo(id){
      uni.setClipboardData({
        data: id,
        showToast: false,
        success: function () {
          uni.showToast({
            title: '单号已复制',
            icon: 'success'
          });
        }
      });
    },
    // 拨号
    _dialMobile(mobile){
      uni.makePhoneCall({
        phoneNumber: mobile,
        success: function () {
          console.log('拨打成功');
        }
      })
    },
    // 跳转去添加快递信息 1:新增 2：编辑
    _goAddLogit(type,orderAllId,logisticsCode,orderShipId,logisticsName = ''){
      if(type === 2){
        this.navigateTo({ url: `/pagesA/order/editLogistics?types=${type}&orderAllId=${orderAllId}&logisticsCode=${logisticsCode}&orderShipId=${orderShipId}&logisticsName=${logisticsName}` })
      }else{
        this.navigateTo({ url: `/pagesA/order/editLogistics?types=${type}&orderAllId=${orderAllId}` })
      }
    },
    // 复制快递信息
    _copAddLogit(locaMsg){
      let params = `${locaMsg.logisticsName}：${locaMsg.logisticsCode}`
      uni.setClipboardData({
        data: params,
        showToast: false,
        success: function () {
          uni.showToast({
            title: '已复制',
            icon: 'success'
          });
        }
      });
    },
    // 联系团长
    connection(groupAccountId){
      if(this.$store.state.imUserInfo.imId === groupAccountId){
        uni.showToast({
          title: '不能联系自己',
          icon: 'none'
        });
        return
      }else{
        this.navigateTo({url: '/pagesB/message/messageDetails?id='+groupAccountId})
      }
    },
    // 修改收货地址
    _openEditAddress(){
      this.editAddressShow = true
    },
    // 更新收货地址
    upDateAddress(obj){
      this.orderDetails.receiveName = obj.receiveName
      this.orderDetails.receiveMobile = obj.receiveMobile
      this.orderDetails.receiveAddress = obj.receiveAddress
    },
    // 虚拟物品发货
    _ship(){
      this.shipShow = true
    },
    // 虚拟物品确认发货
    _configShip(){
      orderApi.deliverGoods({orderAllId: this.orderDetails.orderAllId}).then(res=>{
        this.orderDetails.status = 7 // 订单状态直接改为已完成
        this.shipShow = false
      })  
    },
    // 复制收货用户信息
    _copyUserMsg(ord){
      let params = ``
      params += `姓名：${ord.receiveName}\n`
      params += `手机号：${ord.receiveMobile}\n`
      if(ord.freightType !== 2){ // 需要物流的加上收货地址
        params += `收货地址：${ord.receiveAddress}\n`
      }
      uni.setClipboardData({
        data: params,
        showToast: false,
        success: function () {
          uni.showToast({
            title: '已复制',
            icon: 'success'
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.orderDetails {
  height: calc(100% - 96rpx);
  overflow: auto;
  .bgf {
    background-color: #fff;
    .orderAvatar {
      width: 40rpx;
      height: 40rpx;
      margin-right: 8rpx;
      border-radius: 40rpx;
    }
  }
  .title {
    line-height: 80rpx;
    padding: 0 32rpx;
    background-color: #fffbe8;
  }
  .order-image_1 {
    margin: 3rpx 0 5rpx 13rpx;
    width: 14rpx;
    height: 24rpx;
  }
  .h1 {
    color: #000;
    font-weight: 500;
    line-height: 78rpx;
  }
  .statusBox {
    padding: 20rpx 32rpx;
  }
  .order_section_13 {
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 20rpx;
  }
  .order_group_10 {
    font-size: 28rpx;
    line-height: 80rpx;
    white-space: nowrap;
    padding: 0 32rpx;
    box-shadow: inset 0px -1px 0px #eeeeee;
  }
  .order_image_9 {
    margin-left: 13rpx;
    width: 14rpx;
    height: 24rpx;
  }

  .cellBox1 {
    padding: 0 32rpx;
    color: #969799;
  }
  .ov1 {
    @include toe();
  }
  .order_group_13 {
    padding: 0 32rpx;
    line-height: 34rpx;
    white-space: nowrap;
    color: #969799;
  }
  .order_image_10 {
    width: 28rpx;
    height: auto;
    flex-shrink: 0;
  }
  .order_text_23 {
    margin-left: 18rpx;
    white-space: normal;
    max-width: 550rpx;
  }
  .order_text_24 {
    margin-left: 45rpx;
    white-space: normal;
  }
  .order_group_15 {
    margin-top: 8rpx;
    padding: 0 32rpx 0 72rpx;
    color: #969799;
  }
  .order_image_11 {
    width: 14rpx;
    height: 24rpx;
    margin-top: 2rpx;
    margin-left: 13rpx;
  }
  .order_section_11 {
    padding: 24rpx 32rpx;
    box-shadow: inset 0px -1px 0px #eeeeee;
  }
  .huuiduColor{
    color:#969799;
  }
  .order-text_11 {
    color: rgb(0, 0, 0);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .order-text_12 {
    color: rgb(228, 68, 53);
    font-size: 32rpx;
    line-height: 44rpx;
    white-space: nowrap;
  }
  .order-text_13 {
    margin: 6rpx 0 6rpx 16rpx;
    color: rgb(0, 0, 0);
    font-size: 24rpx;
    line-height: 34rpx;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    top: 12rpx;
    @include toe();
  }
  .goodsBox {
    padding: 32rpx;
    .goodsImage {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
      flex-shrink: 0;
    }
    .goodsMsg {
      flex: 1;
      .name {
        width: 500rpx;
        color: rgba(0, 0, 0, 0.9);
        @include toe();
      }
      .outh {
        color: #969799;
        font-size: 24rpx;
        padding-top: 16rpx;
      }
      .plice {
        padding-top: 32rpx;
      }
    }
    .goodsBtn1{
      font-size: 24rpx;
      line-height: 40rpx;
      white-space: nowrap;
      border-radius: 40rpx;
      text-align: center;
      padding: 0 16rpx;
    }
    .goodsBtn1.themeFontColor{
      border: solid 1px $themeColor;
    }
    .goodsBtn1.huuiduColor{
      border: solid 1px #969799;
    }
    .goodsBtn1+.goodsBtn1{
      margin-left: 20rpx;
    }
  }
  .btmBtn1{
    font-size: 28rpx;
    line-height: 50rpx;
    white-space: nowrap;
    border-radius: 50rpx;
    text-align: center;
    padding: 0 20rpx;
    min-width: 150rpx;
  }
  .btmBtn1.themeFontColor{
    border: solid 1px $themeColor;
  }
  .btmBtn1.huuiduColor{
    border: solid 1px #969799;
  }
  .btmBtn1.themeBgColor{
    color: #FFF;
  }
  .btmBtn1+.btmBtn1{
    margin-left: 20rpx;
  }
  .posFixed{
    position: fixed;
    width: 100%;
    bottom: 0;
    box-shadow: inset 0px 1px 0px #EBEDF0;
  }
  .headTitle {
    color: rgba(0, 0, 0, 0.9);
    line-height: 96rpx;
    font-weight: 500;
    font-size: 36rpx;
    text-align: center;
  }
  .listBody{
    background-color: #F7F8FA;
    .linght44{
      line-height: 88rpx;
      background-color: #FFF;
    }
  }

  .configBtn{
    margin:0 32rpx;
    border-radius: 8rpx;
    line-height: 96rpx;
    text-align: center;
    color: #FFF;
  }
  .editLocBtn{
    padding: 2rpx 16rpx;
    border: solid 1px #eee;
    border-radius: 6rpx;
    color: #323232;
    height: 42rpx;
    line-height: initial;
  }
  .editLocBtn+.editLocBtn{
    margin-left: 20rpx;
  }
  .editLocBtn.fz-10{
    line-height: 34rpx;
  }
}
</style>